<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			form,
			ul.mui-table-view {
				margin-top: 15px;
			}
			
			form.mui-input-group label {
				width: 35%;
				font-size: 14px;
			}
			
			form.mui-input-group input,
			form.mui-input-group select,
			form.mui-input-group textarea {
				width: 65%;
				font-size: 14px;
			}
			
			.address .map {
				height: 40px;
				width: 15%;
			}
			.address .map:active {
				background-color: #efeff4;
			}
			
			.address .map i.iconfont {
				font-size: 32px;
				color: #FEB406;
				line-height: 40px;
			}
			
			.address .map {
				text-align: center;
				width: 25%;
				display: inline-block;
			}
			
			form.mui-input-group .textarea {
				height: 90px;
			}
			
			#artshow_photo_text{
				position: relative;/*相对定位*/
				top: 20px;
			}
			#artshow_photo{
				float: right;
				margin-right: 30px;
				height: 60px;
				max-height: 100%;
				width: 60px;
				border-radius: 600px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-pull-right">清空</a>
			<h1 class="mui-title color">填写帮办信息</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>帮办标题</label>
					<input type="text" id="title" class="mui-input-clear mui-input" placeholder="请输入">
				</div>
			</form>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="artistheaderphoto">
						<span id="artshow_photo_text">活动图</span><img src="" id="artshow_photo" />
					</a>
				</li>
			</ul>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>帮办类型</label>
					<select id="type">
						<option value="1" selected>搬家</option>
						<option value="2">保姆</option>
						<option value="3">维修</option>
						<option value="4">摄影</option>
						<option value="5">婚庆</option>
						<option value="6">送餐</option>
						<option value="7">服务员</option>
						<option value="8">会场布置</option>
						<option value="9">司仪驻唱</option>
						<option value="10">礼仪模特</option>
						<option value="11">传单派发</option>
						<option value="12">游戏代练</option>
						<option value="13">代驾</option>
						<option value="14">代购</option>
						<option value="15">同城跑腿</option>
						<option value="16">更多服务</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label>城市</label>
					<input type="text" class="mui-input" id="city">
					<span class="map mui-pull-right"></span>
				</div>
				<div class="mui-input-row textarea address">
					<label>详细地址</label>
					<textarea rows="3" cols="15" id="address"></textarea>
					<span class="map"><i class="iconfont">&#xe61f;</i></span>
				</div>
				<div class="mui-input-row">
					<label>帮办开始</label>
					<input type="text" id="performBeginTime" class="mui-input-clear mui-input timePicker start artshow" placeholder="请选择" readonly>
				</div>
				<div class="mui-input-row">
					<label>帮办结束</label>
					<input type="text" id="performEndTime" class="mui-input-clear mui-input timePicker end artshow" placeholder="请选择" readonly>
				</div>
			</form>

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>薪酬(元)</label>
					<input type="number" id="salary" class="mui-input-clear mui-input" placeholder="请输入">
				</div>
				<div class="mui-input-row">
					<label>活动人数</label>
					<input type="number" id="artistNum" class="mui-input-clear mui-input" placeholder="请输入">
				</div>
				<div class="mui-input-row">
					<label>性别</label>
					<select id="gender">
						<option value="0" selected>男女不限</option>
						<option value="1">只限男性</option>
						<option value="2">只限女性</option>
					</select>
				</div>
				
				<div class="mui-input-row mui-hidden">
					<label>语言要求</label>
					<input type="text" id="language" value="普通话" class="mui-input-clear mui-input" placeholder="" >
				</div>
				<div class="mui-input-row mui-hidden">
					<label>身材要求</label>
					<input type="text" id="stature" class="mui-input-clear mui-input" placeholder="" id="ccc" value="shou" >
				</div>
				
			</form>

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>联系人</label>
					<input id='contacts' type="text" class="mui-input-clear mui-input" placeholder="请输入">
				</div>
				<div class="mui-input-row">
					<label>联系方式</label>
					<input id='contactway' type="text" class="mui-input-clear mui-input" placeholder="请输入">
				</div>
			</form>

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>报名开始</label>
					<input id='beginTime' type="text" class="mui-input-clear mui-input timePicker start entry" placeholder="请选择" readonly>
				</div>
				<div class="mui-input-row">
					<label>报名结束</label>
					<input id='endTime' type="text" class="mui-input-clear mui-input timePicker end entry" placeholder="请选择" readonly>
				</div>
			</form>

			<form class="mui-input-group">
				<div class="mui-input-row textarea">
					<label>具体要求</label>
					<textarea rows="3" cols="15" id="require"></textarea>
				</div>
			</form>

			<form class="mui-input-group">
				<div class="mui-input-row textarea">
					<label>报酬说明</label>
					<textarea rows="3" cols="15" id="salaryDescription"></textarea>
				</div>
			</form>
			<span id="map"></span>
			<button class="mui-btn btn-main btn-block" type="button" data-loading-text = "发布中">发布</button>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var map = null,
				addressNode = document.getElementById("address"),
				cityNode = document.getElementById("city"),
				selectLocation = null; // 经纬度
				
			// 未填写完毕时返回需确认 有默认值的输入框除外
			var oldBack = mui.back;

			var artshowInfo = {};
			document.addEventListener('changeLocation', function() {
				addressNode.value = (event.detail.address != '搜索中' ? event.detail.address : '');
				selectLocation = event.detail.location;
				Common.getCity(event.detail.address, function(city) {
					cityNode.value = city;
					mui.toast('城市信息获取成功');
				}, function(data) {
					console.log(JSON.stringify(data));
					mui.toast('城市信息获取失败，请稍后重试');
				})
			})

			mui.plusReady(function() {
				map = new plus.maps.Map('map');
				map.getUserLocation(function(state, point) {
					if(0 == state) {
						selectLocation = point;
						plus.maps.Map.reverseGeocode(point, {}, function(e) {
							addressNode.value = e.address;
							Common.getCity(e.address, function(city) {
								cityNode.value = city;
								mui.toast('城市信息获取成功');
							}, function(data) {
								console.log(JSON.stringify(data));
								mui.toast('城市信息获取失败，请稍后重试');
							})
						}, function() {
							mui.toast('定位信息获取失败，请稍后重试');
						})
					} else {
						mui.toast('定位信息获取失败，请稍后重试');
					}
				})
				
				mui('.mui-input-row').on('tap', '.timePicker.artshow', function() {
					var $this = $(this);
					var $brother = $(this).parent('.mui-input-row').siblings('.mui-input-row').find('input.timePicker');
					var dDate = new Date();
					var minDate = new Date();
					minDate.setFullYear(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
					var maxDate = new Date();
					maxDate.setFullYear(dDate.getFullYear() + 2, dDate.getMonth(), dDate.getDate());
					plus.nativeUI.pickDate(function(e1) {
						var pickDate = e1.date;
						var dTime = new Date();
						plus.nativeUI.pickTime(function(e2) {
							var pickTime = e2.date;
							pickDate.setHours(pickTime.getHours());
							pickDate.setMinutes(pickTime.getMinutes());
							artshowInfo[$this[0].id] = pickDate.getTime();
							$this.val(pickDate.toLocaleString());
							if($this.hasClass('start')) {
								if(artshowInfo[$brother[0].id] && $brother[0].value) {
									if(artshowInfo[$brother[0].id] < artshowInfo[$this[0].id]) {
										mui.toast('开始时间不得大于结束时间！');
										$this.val('');
									}
								}
							} else {
								if(artshowInfo[$brother[0].id] && $brother[0].value) {
									if(artshowInfo[$this[0].id] < artshowInfo[$brother[0].id]) {
										mui.toast('结束时间不得小于开始时间！');
										$this.val('');
									}
								}
							}
						}, function(e) {
							$this.val('');
						}, {
							title: $this.prev('label').text() + '时间',
							is24Hour: true,
							time: dTime
						});
					}, function(e) {
						$this.val('');
					}, {
						title: $this.prev('label').text() + '日期',
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})
				
				mui('.mui-input-row').on('tap', '.timePicker.entry', function() {
					var $this = $(this);
					var $brother = $(this).parent('.mui-input-row').siblings('.mui-input-row').find('input.timePicker');
					var dDate = new Date();
					var minDate = new Date();
					minDate.setFullYear(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
					var maxDate = new Date();
					maxDate.setFullYear(dDate.getFullYear() + 2, dDate.getMonth(), dDate.getDate());
					plus.nativeUI.pickDate(function(e1) {
						var pickDate = e1.date;
						pickDate.setHours(0);
						pickDate.setMinutes(0);
						var dTime = new Date();
						artshowInfo[$this[0].id] = pickDate.getTime();
						$this.val(pickDate.toLocaleString().substr(0, 8));
						if($this.hasClass('start')) {
							if(artshowInfo[$brother[0].id] && $brother[0].value) {
								if(artshowInfo[$brother[0].id] < artshowInfo[$this[0].id]) {
									mui.toast('开始时间不得大于结束时间！');
									$this.val('');
								}
							}
						} else {
							if(artshowInfo[$brother[0].id] && $brother[0].value) {
								if(artshowInfo[$this[0].id] < artshowInfo[$brother[0].id]) {
									mui.toast('结束时间不得小于开始时间！');
									$this.val('');
								}
							}
						}
					}, function(e) {
						$this.val('');
					}, {
						title: $this.prev('label').text() + '日期',
						date: dDate,
						minDate: minDate,
						maxDate: maxDate
					});
				})
				
				//演艺活动列表图
				//监听pickheader事件
				var jstr = {};
				document.addEventListener('pickheader',function(){
					var path1 = event.detail.path;//获取传递过来的数据
//					console.log('1' + path1);
					jstr.path = path1;
//					console.log(JSON.stringify(jstr));
					//显示缩略图
					document.getElementById("artshow_photo").src = path1;
				});


				mui('.mui-content').on('tap', 'button', function() {
					var self = this;
					mui(self).button('loading');
					$("input[type='text'], input[type='number'], textarea, select").not('.timePicker, #location').each(function() {
						if(this.id == 'salary') {
							artshowInfo[this.id] = this.value * 100;
						} else {
							artshowInfo[this.id] = this.value;
						}
					})
					artshowInfo.lng = selectLocation.longitude;
					artshowInfo.lat = selectLocation.latitude;
					console.log(JSON.stringify(artshowInfo));
//					alert(JSON.stringify(artshowInfo));

					jstr.perfBean = artshowInfo;
					console.log(JSON.stringify(jstr));
					Common.ajax({
						url : baseURL + 'perf/sendPerf.json',
						type : 'POST',
						contentType : "application/json; charset=utf-8",
						data : JSON.stringify(jstr)
					}, function(data) {
						if(data.code == 1) {
							console.log(JSON.stringify(data));
							mui.toast('发布成功');
							mui(self).button('reset');
							oldBack();
						} else {
							mui(self).button('reset');
							mui.toast(data.msg);
						}
					}, function(xhr) {
						mui(self).button('reset');
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				})
					
				mui('.mui-input-row').on('tap', '.map', function() {
					$("input,textarea").blur();
					plus.nativeUI.showWaiting();
					setTimeout(function() {
						Common.openWindow('map.html');
					}, 1000)
				})
				
				mui('.mui-table-view').on('tap', '#artistheaderphoto', function() {
					var btnArray = [{title:"拍照"},{title:"从相册选择"}];
					var pic = this;
					plus.nativeUI.actionSheet( {
						title:"修改帮办活动图",
						cancel:"取消",
						buttons:btnArray
					}, function(e){
						var index = e.index;
						switch (index){
							case 0:
								break;
							case 1:
								captureImage(pic);//拍照
								break;
							case 2:
								selectPicture(pic);
								break;
							default:
								break;
						}
					});
				})
			})

			mui('.mui-bar').on('tap', '.mui-pull-right', function() {
				$("input, textarea").blur();
				plus.nativeUI.confirm("确认清空？", function(e) {
					if(!e.index) {
						$("input, textarea").not($("#address, #city")).val('');
						$("select#type").val(1);
						$("select#gender").val(0);
					}
				}, "", ["确定", "取消"]);

			})
			
			// 拍照
			function captureImage(pic) {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						mui.openWindow({
							url: 'cropper.html',
							id: 'cropper.html',
							extras: {
								path: "file:///" + entry.fullPath,
								change: "cem"
							}
						});
					}, function(e) {
						mui.toast(e.message);
					});
				}, function(e) {}, {
					filename: "_doc/camera/"
				});
			}
			
			// 从相册中选择图片 
			function selectPicture(pic) {
				plus.gallery.pick(function(url) {
					mui.openWindow({
						url: 'cropper.html',
						id: 'cropper.html',
						extras: {
							path: url,
							change: "open"
						}
					});
				}, function(error) {
					// TODO 判断用户主动取消还是打开失败
					mui.toast("打开相册失败");
				});
			}
			
			mui.back = function() {
				var hasWrite = false;
				$("input, textarea").not('#address, #city, #sex, #language').each(function() {
					if(this.value) {
						hasWrite = true;
					}
				})
				if(hasWrite) {
					plus.nativeUI.confirm("您尚未完成发布，是否返回？", function(e) {
						if(!e.index) {
							oldBack();
						}
					}, '', ["确定", "取消"]);
				} else {
					oldBack();
				}
			}
			
		</script>
	</body>

</html>